<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础信息</span>
        </div>
      </template>

      <div class="first">
        <div class="information">
          <el-form ref="ruleFormRef" label-width="200px" :rules="rules" :model="ruleForm" class="demo-ruleForm">
            <el-form-item class="required" label="员工姓名:" prop="staffName">
              <el-input v-model="ruleForm.username" type="text"></el-input>
            </el-form-item>
            <el-form-item class="required" label="登录名:" prop="loginName">
              <el-input v-model="ruleForm.loginName" type="text"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="登录密码:" prop="password">
              <el-input v-model="ruleForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="邮箱:" prop="email">
              <el-input v-model="ruleForm.email" type="text"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="性别:" prop="sex">

              <el-select class="xrequired" v-model="ruleForm.sex" placeholder="---请选择---">
                <el-option label="男" value="nan" />
                <el-option label="女" value="nv" />
              </el-select>

            </el-form-item>

            <el-form-item class="xrequired" label="生日:" prop="birthday">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="ruleForm.birth" type="datetime" placeholder="---请选择---" />
              </div>
            </el-form-item>
            <el-form-item class="xrequired" label="入职日期:" prop="entryjob">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="ruleForm.entryTime" type="datetime" placeholder="---请选择---" />
              </div>
            </el-form-item>
            <el-form-item class="xrequired" label="初次参加工作日期:" prop="firstjobdate">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="ruleForm.firstJobTime" type="datetime" placeholder="---请选择---" />
              </div>
            </el-form-item>
            <el-form-item class="xrequired" label="月薪:" prop="salary">
              <el-input v-model="ruleForm.salary" type="text"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="系统权限:" prop="authority">
              <el-select v-model="ruleForm.authority" placeholder="---请选择---">
                <el-option v-for="authority in authorities" :key="authority.authorityId" :label="authority.name"
                  :value="authority.authorityId" />

              </el-select>
            </el-form-item>
            <el-form-item class="xrequired" label="入职部门:" prop="dept">
              <el-select v-model="ruleForm.deptName" placeholder="---请选择---">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </el-form-item>
            <el-form-item class="xrequired" label="职位:" prop="position">
              <el-select v-model="ruleForm.posName" placeholder="---请选择---">
                <el-option v-for="posList in PosList" :key="posList.posId" :label="posList.posName"
                  :value="posList.posId" />

              </el-select>
            </el-form-item>
            <el-form-item class="xrequired" label="考勤方式:" prop="attendanceMethod">
              <el-select v-model="ruleForm.checkType" placeholder="---请选择---">
                <el-option v-for="item in checkType1" 
                  :key="item.checkId" 
                  :label="item.type"
                  :value="item.checkId" />
              </el-select>
            </el-form-item>
            <el-form-item class="xrequired" label="上传照片:" prop="img">
              <el-button>上传</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addStaffFn()">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import type { AddStaffInfo, Authority, checkType, DeptList, Pos } from '@/model';
import { addStaff, getAuthority, getCheckType } from '@/api/staff';
import { getPosition } from '@/api/pos';
import { getDeptListInfo } from '@/api/dept';

const ruleFormRef = ref<FormInstance>()

const ruleForm = ref<AddStaffInfo>({
  username: '',
  loginName: '',
  password: '',
  email: '',
  sex: '',
  birth: '',
  entryTime: '',
  firstJobTime: '',
  salary: '',
  authority: '',
  deptName: '',
  posName: '',
  checkType: '',
  headImg: ''
})

const addStaffFn = async () => {
  const res = await addStaff(ruleForm.value);
  ruleForm.value = res.data;

}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
interface RuleForm {
  staffName: string,
  loginName: string,
  password: string,
  email: string,
  sex: string,
  birthday: string,
  entryjob: string,
  firstjobdate: string,
  salary: string,
  authority: string,
  dept: string,
  position: string,
  attendanceMethod: string,
  img: string

}
const authorities = ref<Authority[]>([])

const getAuthorityFn = async () => {
  const res = await getAuthority()
  authorities.value = res.data
}
getAuthorityFn()


const PosList = ref<Pos[]>([])
const getPositionFn = async () => {
  const res = await getPosition()
  PosList.value = res.data
}
getPositionFn()


const deptList = ref<DeptList[]>([])
const getDeptListInfoFn = async () => {
  const res = await getDeptListInfo()
  deptList.value = res.data
}
getDeptListInfoFn()

const checkType1 = ref<checkType[]>([])
const getCheckTypeFn = async () => {
  const res = await getCheckType()
  checkType1.value = res.data
}
getCheckTypeFn()

const rules = reactive<FormRules<RuleForm>>({
  staffName: [
    { required: true },

  ], loginName: [
    { required: true },

  ], password: [
    { required: true },

  ], email: [
    { required: true },

  ], sex: [
    { required: true },

  ], birthday: [
    { required: true },

  ], entryjob: [
    { required: true },

  ], firstjobdate: [
    { required: true },

  ], salary: [
    { required: true },

  ], authority: [
    { required: true },

  ], dept: [
    { required: true },
  ], position: [
    { required: true },

  ], attendanceMethod: [
    { required: true },

  ], img: [
    { required: true },
  ]

})

</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  display: flex;


}

.required .el-form-item__label::before {
  content: '*';
  color: red;
  margin-right: 0px;
  /* 控制星号与标签文本之间的间距 */
}
</style>
